<template>
  <section class="page-content">
    <div class="toolbar">
      <el-button type="primary" icon="yuethink-add" size="small" @click="create">新增</el-button>
      <el-button type="success" icon="yuethink-edit" size="small" @click="edit">编辑</el-button>
      <el-button type="danger" icon="yuethink-delete" size="small" @click="destory">删除</el-button>
    </div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" v-loading="treeLoading">
      <el-tab-pane label="文章分类" name="post">
        <el-tree 
          ref="tree"
          :data="treeData"
          :props="props" 
          :indent="26"
          @node-click="nodeClick" 
          default-expand-all
          node-key="id"
          :highlight-current="true"
          >
        </el-tree>
      </el-tab-pane>
    </el-tabs>
    <!-- dialig -->
    <el-dialog title="分类" :visible.sync="visible">
      <el-form :model="formData" ref="formData" :rules="formRules"  label-width="120px">
        <el-form-item label="分类名称" prop="name">
          <el-input v-model="formData.name" placeholder="分类名称"></el-input>
        </el-form-item>
        <el-input v-model="formData.belongs_to" type="hidden"></el-input>
        <el-input v-model="formData.id" type="hidden"></el-input>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false" :disabled="editLoading">取 消</el-button>
        <el-button type="primary" :loading="editLoading" @click="handleCreateOrEdit('formData')">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        // tree
        activeName: 'post',
        checkedNode: null,
        treeData: [],
        props: {
          children: 'children',
          label: 'name'
        },
        treeLoading: false,
        // dialog
        parentCategories: [],
        editLoading: false,
        visible: false,
        tempData: {
          id: null,
          name: '',
          parent_id: null,
          belongs_to: 'post',
          keywords: '',
          description: ''
        },
        formData: {},
        formRules: {
          name: [
            { required: true, message: '请输入分类名称', trigger: 'blur' },
            { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
          ],
          parent_id: [
            { type: 'number', required: true, message: '请选择父级分类', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      handleClick (tab, event) {
        console.log(tab, event)
      },
      nodeClick (data, node) {
        // this.checkedNode = data
        this.checkedNode = Object.assign({}, data)
      },
      create () {
        this._restFormData()
        this.visible = true
      },

      edit () {
        if (!this.checkedNode) {
          this.$message.warning('请点击选中要编辑的类别')
          return false
        }
        this.formData = this.checkedNode
        this.visible = true
      },

      handleCreateOrEdit (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$http({
              method: this.formData.id === null ? 'post' : 'put',
              url: this.formData.id === null ? '/forumSort' : '/forumSort/' + this.formData.id,
              data: this.formData
            }).then((response) => {
              this.$message.success(response.data.message)
              this.editLoading = false
              this.visible = false
              this._getTreeData()
              this._getParentCategories()
            }).catch((error) => {
              this.editLoading = false
              console.log(error)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },

      destory () {
        if (!this.checkedNode) {
          this.$message.warning('请点击选中要删除的类别')
          return false
        }
        if (this.checkedNode && this.checkedNode.children.length > 0) {
          this.$message.warning('【' + this.checkedNode.name + '】分类下存在子分类，不能删除')
          return false
        }

        this.$confirm('确定要删除【' + this.checkedNode.name + '】分类?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete('/forumSort/' + this.checkedNode.id).then((response) => {
            this.$message.success('删除成功')
            this.checkedNode = null
            this._getTreeData()
            this._getParentCategories()
          }).catch((error) => {
            console.log(error)
          })
        }).catch(() => {
        })
      },

      _getParentCategories () {
        let url = '/forumSort?belongs_to=' + this.tempData.belongs_to + '&data_type=tree'
        this.$http.get(url).then((response) => {
          this.parentCategories = response.data
        }).catch((error) => {
          console.log(error)
        })
      },

      _getTreeData () {
        this.treeLoading = true
        let treeUrl = '/forumSort?belongs_to=' + this.tempData.belongs_to
        this.$http.get(treeUrl).then((response) => {
          this.treeData = response.data
          this.treeLoading = false
        }).catch((error) => {
          console.log(error)
        })
      },
      _restFormData () {
        this.formData = Object.assign({}, this.tempData)
      }
    },
    mounted () {
      this._restFormData()
      this._getParentCategories()
      this._getTreeData()
    }
  }
</script>
<style lang="scss" scoped>
  .el-select, .el-input, .el-textarea {
    width: 80%;
  }
</style>